<template>
<div>
  <!--  导入面包屑组件-->
  <BreadCrumb></BreadCrumb>

  <h3>用户管理</h3>
  <!--  导入搜索组件-->
  <Search @getData="handerData"></Search>

  <el-button type="primary" @click="visibleDialog=true">新建</el-button>
  <!--  导入对话框-->
  <AddDialog :visible.sync='visibleDialog'></AddDialog>
  <!--导入列表-->
  <List :listData="listData"></List>

  <!--  分页-->
  <div style="float:right;">
    <el-pagination
      background
      layout="prev, pager, next,sizes"
      :total="10">
    </el-pagination>
  </div>

</div>
</template>

<script>
import BreadCrumb from './Breadcrumb' //导入面包屑组件
import Search from './Search' //导入搜索组件
import AddDialog from "./AddDialog";
import List from './List'


export default {
  components:{
    List,
    //映射组件
    BreadCrumb,
    Search,
    AddDialog
  },
  name: "UserList",
  data(){
    return{
      visibleDialog:false,
      listData:[
        {id:1,"super":"false","name":"小张",'phone':15693959121,'email':'2748469198@qq.com'},
        {id:2,"super":"true","name":"老田",'phone':17636167174,'email':'2876301284@qq.com'}
        ]
    }
  },
  methods:{
    // 接收子组件search传递的数据
    handerData(data){
      alert(data)
    }
  }
}
</script>

<style scoped>

</style>
